<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>互联网医疗服务后台管理系统</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="../Css/login.css" />
    <link rel="stylesheet" href="../Utils/swiper-bundle.min.css" />
  </head>
  <body>
    <div class="swiper" style="margin-right: auto; margin-left: 55px">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="../images/医疗服务1.gif" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../images/医疗服务1.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../images/医疗服务2.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../images/医疗服务3.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../images/医疗服务4jpg.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../images/医疗服务5.webp" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../images/医疗服务6.webp" alt="" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <!-- <div class="swiper-pagination"></div> -->

      <!-- 如果需要导航按钮 -->
      <!-- <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div> -->

      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
    </div>
    <div id="loginBox">
      <h1>互联网医疗服务后台管理系统</h1>
      <form action="./homePage.html">
        <div class="form-group">
          <label for="exampleInputName2">账号</label>
          <input
            type="text"
            class="form-control"
            id="user"
            placeholder="账号"
          />
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">密码</label>
          <input
            type="password"
            class="form-control"
            id="pass"
            placeholder="密码"
          />
        </div>

        <div>
          <button type="submit" class="btn-lg btn btn-primary">登录</button>
        </div>
      </form>
    </div>
    <script src="../Utils/swiper-bundle.min.js"></script>
    <script src="../JS/login.js"></script>
    <script>
      //初始化数据
      var user = [
        {
          id: 1,
          name: "医生1",
          sex: "男",
          user: "1001",
          tel: "1999999991",
          pass: "123456",
        },
        {
          id: 2,
          name: "医生2",
          sex: "男",
          user: "1002",
          tel: "1999999991",
          pass: "123456",
        },
        {
          id: 3,
          name: "医生3",
          sex: "男",
          user: "1003",
          tel: "1999999991",
          pass: "123456",
        },
        {
          id: 4,
          name: "医生4",
          sex: "男",
          user: "1004",
          tel: "1999999991",
          pass: "123456",
        },
        {
          id: 5,
          name: "医生5",
          sex: "男",
          user: "1005",
          tel: "1999999991",
          pass: "123456",
        },
        {
          id: 6,
          name: "医生6",
          sex: "男",
          user: "1006",
          tel: "1999999991",
          pass: "123456",
        },
        {
          id: 7,
          name: "医生7",
          sex: "男",
          user: "1007",
          tel: "1999999991",
          pass: "123456",
        },
        {
          id: 8,
          name: "医生8",
          sex: "男",
          user: "1008",
          tel: "1999999991",
          pass: "123456",
        },
        {
          id: 9,
          name: "医生9",
          sex: "男",
          user: "1009",
          tel: "1999999991",
          pass: "123456",
        },
        {
          id: 10,
          name: "医生10",
          sex: "男",
          user: "1010",
          tel: "1999999991",
          pass: "123456",
        },
        {
          id: 11,
          name: "医生11",
          sex: "男",
          user: "1011",
          tel: "1999999991",
          pass: "123456",
        },
      ];

      localStorage.setItem("user", JSON.stringify(user));
    </script>
    <script>
      // 登录信息验证
      var oF = document.querySelector("form");
      var oUser = document.querySelector("#user");
      var oPass = document.querySelector("#pass");
      var userNum = /^\d{4}$/;
      var passWord = /^[0-9a-zA-Z_]{5,11}$/;

      oF.addEventListener("submit", login);
      function login() {
        var user = oUser.value;
        var pass = oPass.value;
        //正则  是否为空 账号密码的格式是否正确
        //如果正则没过
        //提示问题
        //如果正则过了

        if (userNum.test(user) && passWord.test(pass)) {
          //验证账户是否存在
          var data = JSON.parse(localStorage.getItem("user"));
          var index = testData(data, user, pass);
          if (index != -1) {
            //存在
            alert("登陆成功");
            //存用户名
            localStorage.setItem("username", data[index].name);
          } else {
            //不存在
            alert("登陆失败");
            event.preventDefault();
          }
        } else {
          alert("账号或密码输入出错！");
          event.preventDefault();
        }
        function testData(userData, username, password) {
          for (var i = 0; i < userData.length; i++) {
            if (userData[i].user == username && userData[i].pass == password) {
              return i;
            }
          }
          return -1;
        }
      }
    </script>
  </body>
</html>
